import {useState} from 'react' // 引入useState钩子函数
//函数组件 ---演示复杂数据结构
function Header(){
  const [form, setForm] = useState({
    cardName: '月卡',
    cardPrice: 0
  })
  const updateCard= ()=> {
    //要修改数据，不能像下面这样直接修改，应该使用hooks返回的函数去修改
    // form.cardName='年卡'
    // 修改复杂数据类型，应该使用'替换'而不是修改
    setForm({...form, cardPrice: 1000, cardName: '年卡'})
  
  }
  return (
    <div>
      <div>函数组件---{form.cardName}</div>
      <div>函数组件---{form.cardPrice}</div>
      <button onClick={updateCard}>修改月卡名称</button>
    </div>
  )
}
function App() {
  return (
    <div className="App">
      <Header/>
    </div>
  )
}
export default App
